import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
// import { getToken } from '@/utils/auth'

// 创建axios实例(service里面带前缀基地址和超时时间)
const service = axios.create({
  // 知识点1: nodejs+webpack下的环境变量
  // process.env -> nodejs环境下的内置全局变量(任意处使用)
  // 效果: 获取敲击命令, 执行时的 "环境变量"
  // yarn dev(开发环境启动)-> process.env上会被nodejs+webpack挂载.env.development文件里的变量值到这里
  // yarn build:prod(打包准备放入生产环境) -> process.env上会被挂载.env.production文件里的变量值到这里
  // 作用: 根据敲击的命令, 自动加载对应不同的环境变量, 开发时是一个基地址, 上线时是一个基地址
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 网络请求5秒后还没得到响应, 则判定超时, 报错
})

// 请求拦截器
service.interceptors.request.use(
  config => { // 发送请求之前, 对配置对象最后修改

    const token = store.getters.token
    if(token){
      config.headers.Authorization = `Bearer ${token}`
    }
    /* 
    - 如果当前 vuex中有 token，就在请求头中设置上
    - 因为后端返回的 token 没有添加上 Bearer  字符串，因此我们需要手动添加
    - Authorization 和 Bearer 是本项目的后端接口要求的写法。
    */

    return config
  },
  error => { // 请求之前报错执行这里
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应的结果进行拦截
    const { success, message } = response.data
    if (success) {
      return response.data
    } else {
      Message.error(message) // http状态码 2xx  但是逻辑错误
      // 抛出Promise错误的对象
      return Promise.reject(new Error(message))
    }
  },
  error => {
    Message.error(error.response.data.message) // http状态码 4xx

    /* 
    处理token过期的情况
    本项目中 状态码是10002 时 token 失效
    */
    if (error.response && error.response.data && error.response.data.code === 10002) {
      store.commit('user/REMOVE_TOKEN')
      store.commit('user/RESET_STATE')
      router.replace('/login')
    }

    return Promise.reject(error) // 错误统一处理
  }
)

export default service
